<template>
  <MenuLayout>
    <template #content>
      <div>
        <p class="fs-md fwbold mg20">· 服务产品信息</p>
        <el-divider></el-divider>
        <div class="center">
          <p class="fs-md fw600 pl20 tl width-24">· 服务商基本信息</p>
          <el-form class="mt20" label-width="120px" ref="serviceForm"
                   :model="serviceData" label-position="right" label-suffix=":" size="medium">
            <el-col :span="12">
              <el-form-item label="服务商">
                <el-input placeholder="请输入服务商名称" style="width:100%" v-model="serviceData.name"
                          disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" label-width="100px">
                <el-input v-model="serviceData.tel" type="phone" placeholder="请输入服务商联系电话" disabled
                          style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="服务商地址">
                <el-input type="text" placeholder="请输入服务商地址" style="width:100%" disabled
                          v-model="serviceData.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工作时间">
                <div class="flexStart">
                  <el-checkbox-group v-model="serviceData.workingDate" disabled>
                    <el-checkbox label="1">周一</el-checkbox>
                    <el-checkbox label="2">周二</el-checkbox>
                    <el-checkbox label="3">周三</el-checkbox>
                    <el-checkbox label="4">周四</el-checkbox>
                    <el-checkbox label="5">周五</el-checkbox>
                    <el-checkbox label="6">周六</el-checkbox>
                    <el-checkbox label="7">周日</el-checkbox>
                  </el-checkbox-group>
                  <!--            </el-form-item>-->
                  <!--&lt;!&ndash;          </el-col>&ndash;&gt;-->
                  <!--&lt;!&ndash;          <el-col :span="10">&ndash;&gt;-->
                  <!--            <el-form-item prop="workingHours">-->
                  <el-time-picker class="ml40" v-model="serviceData.workingHours" is-range range-separator="-"
                                  format="HH:mm" disabled
                                  start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"/>
                </div>
              </el-form-item>
            </el-col>

            <!--          <el-col :span="21">-->
            <!--          <el-form-item>-->
            <!--            <div class="row-center">-->
            <!--              <el-button type="danger" plain @click="onSubmit" style="width: 120px">暂时保存</el-button>-->
            <!--              <el-button type="danger" style="width: 120px;margin-left: 20px;">{{formState == 0 ? '保存' : '修改'}}</el-button>-->
            <!--            </div>-->
            <!--          </el-form-item>-->
            <!--          </el-col>-->
          </el-form>
        </div>
        <el-divider></el-divider>
        <div class="center">
          <p class="fs-md fw600 pl20 width-24">· 服务产品基本信息</p>
          <el-form class="mt20 width-20" label-width="100px" ref="serviceForm"
                   :model="serviceInfoData" label-position="right" label-suffix=":" size="medium">
            <el-col :span="12">
              <el-form-item label="服务名称">
                <el-input placeholder="请输入服务名称" style="width:100%" v-model="serviceInfoData.name"
                          disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务类型">
                <el-select v-model="serviceInfoData.type" placeholder="请选择服务类型" disabled
                           style="width:100%"></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务价格">
                <el-input v-model="serviceInfoData.price" placeholder="请输入服务价格" disabled
                          style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注说明">
                <el-input v-model="serviceInfoData.remark" placeholder="请输入服务说明" disabled
                          style="width:100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="row-center">
              <el-button type="danger" plain size="medium" @click="locationToDetail">查看服务产品展示页</el-button>
            </el-col>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div class="center">
          <p class="fs-md pl20 width-20"><i class="el-icon-warning color-red mr10"></i>服务补贴总额度剩余：<span
              class="color-red fwbold">3247万元</span></p>
          <p class="fs-md pl20 width-20">该商家已上架服务产品：<span class="color-red fwbold">8个</span>，计划补贴金额已分配<span
              class="color-red fwbold">323.19万元</span>,还可以对该商家分配补贴<span
              class="color-red fwbold">176.81万元</span></p>
          <el-form class="mt20 width-20" label-width="210px" ref="subsidiesDataForm" :rules="subsidiesDataRules"
                   :model="subsidiesData" label-position="right" label-suffix=":" size="medium">
            <el-form-item label="服务产品补贴比例" prop="ratio">
              <el-select placeholder="-请选择-" class="width-10" v-model="subsidiesData.ratio"></el-select>
            </el-form-item>
            <el-form-item label="单个服务产品补贴金额" prop="bidAmt">
              <el-input v-model="subsidiesData.bidAmt" placeholder="根据服务价格和补贴比例自动计算" disabled
                        class="width-10">
                <template slot="append"><span>元</span></template>
              </el-input>
            </el-form-item>
            <el-form-item label="该服务产品最多补贴合同数量" prop="number">
              <el-input v-model="subsidiesData.number" placeholder="请输入最多补贴合同数量" type="number" class="width-10">
                <template slot="append"><span>笔</span></template>
              </el-input>
            </el-form-item>
            <el-form-item label="该服务产品总补贴金额上限" prop="bidAmtLimit">
              <el-input v-model="subsidiesData.bidAmtLimit" placeholder="根据单笔补贴金额和最多补贴数量自动计算" disabled
                        class="width-10">
                <template slot="append"><span>元</span></template>
              </el-input>
            </el-form-item>
            <el-form-item label="审核结果" prop="result">
              <el-radio-group v-model="subsidiesData.result">
                <el-radio :label="2">审核通过</el-radio>
                <el-radio :label="1">退回修改</el-radio>
                <el-radio :label="0">审核不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见">
              <el-input type="textarea" class="width-10" v-model="subsidiesData.remark" :autosize="{minRows: 3, maxRows: 6}"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="">
          <el-button type="danger">提 交</el-button>
        </div>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout'

export default {
  data() {
    return {
      formState: 0,
      serviceData: {
        name: '',
        tel: '',
        address: '',
        workingDate: [],
        workingHours: 0,
        remark: ''
      },
      serviceInfoData: {},
      subsidiesData: {},
      subsidiesDataRules: {
        ratio: [{required: true, message: '服务产品补贴比例不能为空', trigger: 'change'}],
        bidAmt: [{required: true, message: '单个服务产品补贴金额不能为空', trigger: 'blur'}],
        number: [{required: true, message: '该服务产品最多补贴合同数量不能为空', trigger: 'blur'}],
        bidAmtLimit: [{required: true, message: '该服务产品总补贴金额上限不能为空', trigger: 'blur'}],
        result: [{required: true, message: '审核结果不能为空', trigger: 'change'}],
      }
    }
  },
  components: {
    MenuLayout,
    VueEditor
  },
  methods: {
    onSubmit() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {

        } else {

        }
      })
    },
    locationToDetail() {
      this.$router.push({
        path: `/productDetail?type=服务名称1`
      })
    }
  }
}
</script>

<style scoped>
:deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: crimson;
  border-color: crimson;
}

:deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: crimson;
}
/deep/.el-radio.is-checked .el-radio__inner {
  border-color: #D32521;
  background-color: #D32521;
  color: #D32521;
}
/deep/ .el-radio.is-checked .el-radio__label {
  color: #D32521;
}
</style>
